<template>
    <div>
        <van-search v-model="value" show-action shape="round" :background="$store.state.primary_color_1" @search="onSearch"
            placeholder="请输入搜索关键词">
            <template #action>
                <div @click="onSearch">搜索</div>
            </template>
        </van-search>

        <div style="display: flex;">
            <van-sidebar v-model="activeKey" style="border-right: 2px solid #eee;">
                <van-sidebar-item @click="onChangeHot()" title="热门"></van-sidebar-item>
                <van-sidebar-item @click="onChange(item.bg_classId)" :title="item.bg_className" v-for="item in bigServe"
                    :key="item.bg_classId" />
            </van-sidebar>
            <!-- 热门 -->
            <div v-show="show == true" class="baoguo">
                <!-- 标题分割 -->
                <van-divider>热门服务</van-divider>
                <!-- 内容 -->
                <div class="baoguo-1">
                    <div @click="$router.push(`/serve-shop/${hot.id}`)" class="pic" v-for="hot in hotList">
                        <div class="pic-1">
                            <img :src="require(`@/assets/${hot.img}`)">
                            <div>
                                <span>{{ hot.name }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 其他服务 -->
            <div v-show="show == false" class="baoguo">
                <!-- 标题分割 -->
                <van-divider>各类服务</van-divider>
                <!-- <div v-for="small in smallServe">
                    <van-divider>{{ small.sm_className }}</van-divider>
                </div> -->
                <!-- 内容 -->
                <div class="baoguo-1">
                    <div class="pic" v-for="(item, i) in pic" :key="i">
                        <div class="pic-1" v-for="i in item" :key="i.id" @click="$router.push(`/serve-shop/${i.id}`)">
                            <img :src="require(`@/assets/${i.img}`)" style="width: 50px;height: 50px;border-radius: 50%;" />
                            <div>
                                <span>{{ i.name }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <van-empty v-show="this.pic[0] == undefined" image="error" description="暂无内容" />
            </div>





        </div>
    </div>
</div></template>

<script>
import httpApi from '@/http'
export default {
    data() {
        return {
            value: '',
            activeKey: 0,
            bigServe: [],
            show: true, // 热门与其他
            hotList: [],//热门
            smallServe: [],
            pic: [],
        }
    },
    methods: {
        // 搜索栏
        onSearch() {
            console.log('打印输入的值',this.value);
            // 执行模糊查询
        },
        // 通过侧边栏id查询小类切换
        onChange(sbid) {
            // console.log(sbid);
            httpApi.serveApi.queryIdThisClass({ sbid }).then(res => {
                // console.log(res.data.data.sm_classId);
                this.smallServe = res.data.data
                // console.log('服务小类', this.smallServe);
                this.show = false
                // console.log(this.show);
                this.smallServe.forEach(item => {
                    // console.log('请求id', item.sm_classId);
                    // 通过id查询小类
                    httpApi.serveApi.queryIcon({ id: item.sm_classId }).then(res => {
                        this.pic.push(res.data.data)
                        // console.log('循环', this.pic);
                    })
                    this.pic = []
                });
            })
            console.log('图标', this.pic);
        },
        // 通过侧边栏id查询热门切换
        onChangeHot() {
            httpApi.serveApi.queryHotClass({ hot: 1 }).then(res => {
                // console.log('热门', res);
                this.hotList = res.data.data
                this.show = true
                // console.log(this.show);
            })
        }
    },
    mounted() {
        // 查询热门
        this.onChangeHot(1)
        // 查询所有大类
        httpApi.serveApi.queryBigClassList().then(res => {
            // console.log('服务大类', res);
            this.bigServe = res.data.data
        })
    },
}
</script>

<style lang="scss" scoped>
.van-sidebar-item--select::before {
    background-color: #fdd19f;
}

.baoguo {
    display: flex;
    flex-direction: column;
    flex: 1;

    .baoguo-1 {
        display: flex;
        flex-wrap: wrap;

        .pic {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;

            .pic-1 {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-left: 10px;
                margin-bottom: 20px;

                >img {
                    width: 60px;
                    border-radius: 5%;
                }

                div {
                    margin-top: 5px;

                    >span {
                        color: #c67120;
                        display: flex;
                        width: 80px;
                        font-size: 8px;
                        justify-content: center;
                        margin: auto;
                    }
                }
            }

        }
    }




}
</style>